<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/fenlei.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<body>
	<div id="app">
		<div class="searchbar">
			<div id="ss">
				<span></span>
				搜索商品名称
			</div>
		</div>
		<div class="zhuti">
			<div class="n1">
				<div class="ki">
					<span id="nn1">推荐</span>
				</div>
				<div class="ki">
					<span id="nn2">Xiaomi手机</span>
				</div>
				<div class="ki">
					<span id="nn3">Redmi手机</span>
				</div>
				<div class="ki">
					<span id="nn4">游戏手机</span>
				</div>
				<div class="ki">
					<span id="nn5">电脑平板</span>
				</div>
				<div class="ki">
					<span id="nn6">智能穿戴</span>
				</div>
				<div class="ki">
					<span id="nn7">电视</span>
				</div>
				<div class="ki">
					<span id="nn8">大家电</span>
				</div>
				<div class="ki">
					<span id="nn9">小家电</span>
				</div>
				<div class="ki">
					<span id="nn10">只能家居</span>
				</div>
				<div class="ki">
					<span id="nn11">户外出行</span>
				</div>
				<div class="ki">
					<span id="nn12">日用百货</span>
				</div>
				<div class="ki">
					<span id="nn13">儿童用品</span>
				</div>
				<div class="ki">
					<span id="nn14">有品精选</span>
				</div>
				<div class="ki">
					<span id="nn15">小米服务</span>
				</div>
			</div>
			<div id="n1" class="n2">
				<img class="n2_img" src="flimg/bjt.jpeg" >
				<div class="n_span">精选推荐</div>
				<div class="n2_ty" v-for="(item,index) in list" :id="item.id">
					<img src="flimg/sj1.png" >
					<div>
						<span>{{ item.pname }}</span>
						<span>￥{{ item.discount }}</span>
					</div>
				</div>
				<div class="bot">
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td2.png" >
						<span>水壶</span>
					</div>
					<div>
						<img src="flimg/td3.png" >
						<span>吹风机</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td2.png" >
						<span>水壶</span>
					</div>
					<div>
						<img src="flimg/td3.png" >
						<span>吹风机</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
				</div>
			</div>
			<!-- ------------------------------ -->
			<div id="n2" class="n3">
				<img class="n3_img" src="flimg/bjx.png.png" >
				<div class="dhl">
					<div>Xiaomi Civi</div>
					<div>Xiaomi数字系列</div>
					<div>Xiaomi MIX系列</div>
					<div>手机配件</div>
					
				</div>
				<div style="height: 1.16rem;">
					
				</div>
				<div class="n_span">Xiaomi Civi</div>
				<div>
				<div class="n2_ty" v-for="(item,index) in list2" :id="item.id">
					<img src="flimg/sj1.png" >
					<div>
						<span>{{ item.pname }}</span>
						<span>￥{{ item.discount }}</span>
					</div>
				</div>
				</div>
				<div class="n_span">Xiaomi 数字系列</div>
				<div>
					<div class="n2_ty" v-for="(item,index) in list3" :id="item.id">
						<img src="flimg/sj1.png" >
						<div>
							<span>{{ item.pname }}</span>
							<span>￥{{ item.discount }}</span>
						</div>
					</div>
				</div>

				<div class="n_span">Xiaomi MIX系列</div>
				<div>
					<div class="n2_ty" v-for="(item,index) in list4" :id="item.id">
						<img src="flimg/sj1.png" >
						<div>
							<span>{{ item.pname }}</span>
							<span>￥{{ item.discount }}</span>
						</div>
					</div>
				</div>
				<div class="n_span">手机配件</div>
				<div class="bot">
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td2.png" >
						<span>水壶</span>
					</div>
					<div>
						<img src="flimg/td3.png" >
						<span>吹风机</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					<div>
						<img src="flimg/td2.png" >
						<span>水壶</span>
					</div>
					<div>
						<img src="flimg/td3.png" >
						<span>吹风机</span>
					</div>
					<div>
						<img src="flimg/td.png" >
						<span>台灯</span>
					</div>
					
					
				</div>
			</div>
		</div>
		<div class="bottom">
				<div id="sy">
					<img src="img/bottom.png" ><br>
					<a>首页</a>
				</div>
				<div id="fl">
					<img src="img/bs2.png" ><br>
					<a style="color: #FF6700;">分类</a>
				</div>
				<div id="mq">
					<img src="img/bottom3.png" ><br>
					<a>米圈</a>
				</div>
				<div id="gwc">
					<img src="img/bottom4.png" ><br>
					<a href="gwc.html">购物车</a>
				</div>
				<div id="wd">
					<img src="img/bottom5.png" ><br>
					<a href="my.html">我的</a>
				</div>
			</div>
	</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
			<script type="text/javascript">
				let app=new Vue({
					el: "#app",
					data: {
						nr: "",
						list: [],
						list2:[],
						list3:[],
						list4:[]
					},
					methods: {
						goodsGet(){
							this.list="";
							axios
									.get(`queryGoods2`)
									.then(res => {
										console.log(res);
										this.list=res.data.data;
										console.log(this.list);
									})
						},
						goodsGet2(){
							this.list2="";
							axios
									.get(`queryGoods3`)
									.then(res => {
										console.log(res);
										this.list2=res.data.data;
										console.log(this.list2);
									})
						},
						goodsGet3(){
							this.list3="";
							axios
									.get(`queryGoods4`)
									.then(res => {
										console.log(res);
										this.list3=res.data.data;
										console.log(this.list3);
									})
						},
						goodsGet4(){
							this.list4="";
							axios
									.get(`queryGoods5`)
									.then(res => {
										console.log(res);
										this.list4=res.data.data;
										console.log(this.list4);
									})
						},
					}
				});
				app.goodsGet();
				app.goodsGet2();
				app.goodsGet3();
				app.goodsGet4();
					var dhl=document.querySelector(".dhl");
					var n3=document.querySelector(".n3");
					//记录侧边栏一开始距离浏览器顶边品偏移量
					var oriTop=dhl.offsetTop;
					n3.onscroll=function(){
						if(n3.scrollTop>=dhl.offsetTop){
							dhl.style.position="fixed";
							dhl.style.top="1rem";
							// scrollTop+"px";
						}
						else if(n3.scrollTop<=dhl.offsetTop){
							dhl.style.position="absolute";
							dhl.style.top=2+"rem";
						}
					}
			
			    var n1=document.querySelector("#n1");
				var n2=document.querySelector("#n2");
				var nn1=document.querySelector("#nn1");
				var nn2=document.querySelector("#nn2");
				var ss=document.querySelector("#ss");
				ss.onclick=function(){
					window.location.href="ssy.html";
				}
				nn1.onclick=function(){
					n1.style.display="block";
					n2.style.display="none";
				}
				nn2.onclick=function(){
					n2.style.display="block";
					n1.style.display="none";
				}
				// ----------------------------------
				var gwc=document.querySelector("#gwc");
				var sy=document.querySelector("#sy");
				var wd=document.querySelector("#wd");
				var fl=document.querySelector("#fl");
				var mq=document.querySelector("#mq");
				mq.onclick=function(){
					window.location.href="miquan.html";
				}
				fl.onclick=function(){
					window.location.href="fenlei.html";
				}
				sy.onclick=function(){
					window.location.href="index.html";
				}
				gwc.onclick=function(){
					window.location.href="gwc.html";
				}
				wd.onclick=function(){
					window.location.href="my.html";
				}
			</script>
	</body>
</html>